<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/shouye.css">
</head>

<body>
    <!-- 0.楼层效果 -->
    <ul class="nav-x">
        <li>回到顶部</li>
        <li>搜索框</li>
        <li>banner</li>
        <li>今日推荐</li>
        <li>底部</li>
    </ul>

    <!--1.网页顶部 -->
    <div class="module">
        <div class="header one">
            <div class="header-c">
                <div class="header-left">
                    <li class="li1">
                        <p>Hello,Welcome to OJO眼镜</p>
                    </li>
                    <li class="li2">
                        网站导航
                    </li>
                    <li class="li3">
                        消息
                    </li>
                </div>
                <div class="header-right">
                    <a href="dengluzhuce.html" class="aershi">
                        <li class="denglubtn">登录</li>
                    </a>
                    <a href="dengluzhuce.html#zc">
                        <li>注册</li>
                    </a>
                    <a href="gouwuche.html">
                        <li>购物车</li>
                    </a>
                    <a href="#">
                        <li>我的订单</li>
                    </a>
                    <a href="userCenter.html" style="position: relative;" class="ajiu">
                        <li>个人中心
                            <div class="divshi" style="position: absolute;">
                                <p>个人资料</p>
                                <p>全部订单</p>
                                <p class="border">我的足迹</p>
                            </div>

                        </li>
                    </a>
                    <a href="#">
                        <li>历史记录</li>
                    </a>
                    <a href="#">
                        <li>帮助中心</li>
                    </a>
                    <a href="#" id="ashi" style="position: relative;">
                        <li>手机版
                            <div style="position: absolute; left: 0;" class="boxshi">
                                <img src="https://www.o-j-o.cn/themes/ojo/images/weixin1.png" alt="" id="imgshi">
                                <p>移动端下载</p>
                            </div>
                        </li>
                    </a>

                </div>
            </div>
        </div>
    </div>

    <!-- 2.网页头部,搜索栏 -->
    <div class="module">
        <div class="headerone">
            <div class="headerone-c">
                <div class="headeroneleft">
                    <a href="shouye.html"><img src="https://www.o-j-o.cn/themes/ojo/images/logo.png" alt="" class="im1"></a>
                </div>
                <div class="headerright">
                    <div class="search">
                        <input type="text" placeholder="纯钛眼镜">
                        <a href="#" class="awushi">搜索</a>
                    </div>
                    <div class="zhifu-z">
                        <a href="#" class="zhifu">我的O-J-O中心</a>
                    </div>
                    <div class="search-font">
                        <a href="#">热门搜索:</a>
                        <a href="#">框架眼镜</a>
                        <a href="#">太阳眼镜</a>
                        <a href="#">眼镜片</a>
                        <a href="#">OJO</a>
                        <!-- <a href="#">女式太阳镜</a> -->
                        <a href="#">钛架</a>
                        <!-- <a href="#">近视眼镜</a> -->
                        <a href="#" style="border: none !important;">男士太阳镜</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 3.导航栏,二级菜单,轮拨图 -->
    <div class="module">
        <!-- menu:导航栏 -->
        <div class="menu">
            <div class="all-sort">
                <h2><a href="">全部商品分类</a></h2>
            </div>
            <div class="nav">
                <ul class="clearfix">
                    <li><a href="" class="current">所有商品</a></li>
                    <li><a href="shouye.html">首页</a></li>
                    <li><a href="">框架眼镜</a></li>
                    <li><a href="splb.html">纯钛眼镜</a></li>
                    <li><a href="">太阳眼镜</a></li>
                    <li><a href="">眼镜片</a></li>
                    <li><a href="">近视眼镜</a></li>
                    <li><a href="">渐进片</a></li>
                </ul>
            </div>
        </div>
        <!-- wrap:二级菜单和轮拨图 -->
        <div class="wrap-z">
            <div class="wrap">
                <!-- 二级菜单 -->
                <div class="all-sort-list">
                    <div class="item bo">
                        <h3><span>·</span><a href="">框架眼镜</a>、<a href="">适合人群</a>、<a href="">材质</a></h3>
                        <div class="item-list clearfix">
                            <div class="close">x</div>
                            <div class="subitem">
                                <dl class="fore1">
                                    <dt><a href="#">人群</a></dt>
                                    <dd><em><a href="#">男士</a></em><em><a href="#">女士</a></em><em><a href="#">儿童</a></em></dd>
                                </dl>
                                <dl class="fore2">
                                    <dt><a href="#">材质</a></dt>
                                    <dd><em><a href="#">纯钛</a></em><em><a href="#">板材</a></em><em><a href="#">金属合金</a></em><em><a href="#">TR</a></em><em><a href="#">木材</a></em><em><a href="#">塑钢</a></em><em><a href="#">镁铝合金</a></em><em><a href="#">PC</a></em></dd>
                                </dl>
                                <dl class="fore3">
                                    <dt><a href="#">价格</a></dt>
                                    <dd><em><a href="#">0-200元</a></em><em><a href="#">201-400元</a></em><em><a href="#">401-600元</a></em><em><a href="#">600元以上</a></em></dd>
                                </dl>
                                <dl class="fore4">
                                    <dt><a href="#">类型</a></dt>
                                    <dd><em><a href="#">防蓝光</a></em><em><a href="#">钛架</a></em><em><a href="#">切边眼镜</a></em><em><a href="#">套镜</a></em></dd>
                                </dl>
                                <dl class="fore5">
                                    <dt><a href="#">边框</a></dt>
                                    <dd><em><a href="#">全框</a></em><em><a href="#">半框</a></em><em><a href="#">无框</a></em></dd>
                                </dl>
                                <dl class="fore6">
                                    <dt><a href="#">框型</a></dt>
                                    <dd><em><a href="#">偏方框</a></em><em><a href="#">偏圆框</a></em><em><a href="#">多边形</a></em></dd>
                                </dl>
                                <dl class="fore7">
                                    <dt><a href="#">品牌</a></dt>
                                    <dd><em><a href="#">欧杰欧</a></em><em><a href="#">OJO</a></em></dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <h3><span>·</span><a href="">太阳镜</a>、<a href="">品牌</a>、<a href="">功能</a></h3>
                        <div class="item-list clearfix">
                            <div class="close">x</div>
                            <div class="subitem">
                                <dl class="fore1">
                                    <dt><a href="#">人群</a></dt>
                                    <dd><em><a href="#">男士</a></em><em><a href="#">女士</a></em><em><a href="#">儿童</a></em></dd>
                                </dl>
                                <dl class="fore2">
                                    <dt><a href="#">品牌</a></dt>
                                    <dd><em><a href="#">欧杰欧</a></em><em><a href="#">OJO</a></em></dd>
                                </dl>
                                <dl class="fore3">
                                    <dt><a href="#">功能</a></dt>
                                    <dd><em><a href="#">偏光太阳镜</a></em><em><a href="#">夹片</a></em><em><a href="#">近视太阳镜</a></em><em><a href="#">儿童太阳镜</a></em><em><a href="#">骑行太阳镜</a></em><em><a href="#">变色太阳镜</a></em></dd>
                                </dl>
                                <dl class="fore4">
                                    <dt><a href="#">框型</a></dt>
                                    <dd><em><a href="#">蛤蟆镜</a></em><em><a href="#">方形太阳镜</a></em><em><a href="#">圆形太阳镜</a></em></dd>
                                </dl>
                                <dl class="fore5">
                                    <dt><a href="#">价格</a></dt>
                                    <dd><em><a href="#">0-100元</a></em><em><a href="#">101-300元</a></em><em><a href="#">301-500元</a></em><em><a href="#">500元以上</a></em></dd>
                                </dl>
                                <dl class="fore6">
                                    <dt><a href="#">材质</a></dt>
                                    <dd><em><a href="#">纯钛</a></em><em><a href="#">板材</a></em><em><a href="#">金属合金</a></em><em><a href="#">TR</a></em><em><a href="#">木材</a></em><em><a href="#">塑钢</a></em><em><a href="#">镁铝合金</a></em><em><a href="#">PC</a></em></dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <h3><span>·</span><a href="">眼镜片</a>、<a href="">适合度数</a>、<a href="">折射率</a></h3>
                        <div class="item-list clearfix">
                            <div class="close">x</div>
                            <div class="subitem">
                                <dl class="fore1">
                                    <dt><a href="#">度数</a></dt>
                                    <dd><em><a href="#">0-300度</a></em><em><a href="#">325-600度</a></em><em><a href="#">625-800度</a></em><em><a href="#">800度以上</a></em></dd>
                                </dl>
                                <dl class="fore2">
                                    <dt><a href="#">材料</a></dt>
                                    <dd><em><a href="#">树脂镜片</a></em><em><a href="#">PC太空片</a></em><em><a href="#">玻璃镜片</a></em></dd>
                                </dl>
                                <dl class="fore3">
                                    <dt><a href="#">价格</a></dt>
                                    <dd><em><a href="#">偏光太阳镜</a></em><em><a href="#">夹片</a></em><em><a href="#">近视太阳镜</a></em><em><a href="#">儿童太阳镜</a></em><em><a href="#">骑行太阳镜</a></em><em><a href="#">变色太阳镜</a></em></dd>
                                </dl>
                                <dl class="fore4">
                                    <dt><a href="#">类型</a></dt>
                                    <dd><em><a href="#">近视透明片</a></em><em><a href="#">变色片</a></em><em><a href="#">防辐射</a></em><em><a href="#">抗疲劳</a></em><em><a href="#">防蓝光</a></em><em><a href="#">偏光片</a></em><em><a href="#">老花片</a></em><em><a href="#">定制片</a></em><em><a href="#">渐进镜片</a></em></dd>
                                </dl>
                                <dl class="fore5">
                                    <dt><a href="#">品牌</a></dt>
                                    <dd><em><a href="#">欧杰欧</a></em><em><a href="#">OJO</a></em><em><a href="#">ZEISS</a></em><em><a href="#">蔡司</a></em><em><a href="#">OJO</a></em><em><a href="#">Essilor</a></em><em><a href="#">依视路</a></em></dd>
                                </dl>
                                <dl class="fore6">
                                    <dt><a href="#">折射率</a></dt>
                                    <dd><em><a href="#">1.56</a></em><em><a href="#">1.61</a></em><em><a href="#">1.67</a></em><em><a href="#">1.74</a></em></dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <h3><span>·</span><a href="">功能镜片</a>、<a href="">运动镜</a>、<a href="">配件</a></h3>
                        <div class="item-list clearfix">
                            <div class="close">x</div>
                            <div class="subitem">
                                <dl class="fore1">
                                    <dt><a href="#">老花镜</a></dt>
                                    <dd><em><a href="#">男士老花镜</a></em><em><a href="#">女士老花镜</a></em></dd>
                                </dl>
                                <dl class="fore2">
                                    <dt><a href="#">运动镜</a></dt>
                                    <dd><em><a href="#">游泳镜</a></em><em><a href="#">篮球镜</a></em><em><a href="#">骑行镜</a></em><em><a href="#">滑雪镜</a></em></dd>
                                </dl>
                                <dl class="fore3">
                                    <dt><a href="#">配件</a></dt>
                                    <dd><em><a href="#">眼镜框配件</a></em><em><a href="#">镜盒</a></em><em><a href="#">镜布</a></em></dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <h3><span>·</span><a href="">热销</a>、<a href="">推荐</a>、<a href="">特价</a>、<a href="">新品</a></h3>
                    </div>
                    <div class="item">
                        <h3><span>·</span><a href="">综合</a>、<a href="">销量详情</a>、<a href="">爆款推荐</a></h3>
                    </div>
                    <div class="item">
                        <h3><span>·</span><a href="">品牌中心</a>、<a href="">OJO眼镜店</a></h3>
                    </div>
                    <div class="item">
                        <h3><span>·</span><a href="">OJO眼镜网</a>、<a href="">配送服务</a></h3>
                    </div>
                    <div class="item">
                        <h3><span>·</span><a href="">30天内退换货</a></h3>
                    </div>
                </div>
                <!-- 轮播图 -->
                <div id="div1">
                    <ul class="ul1">
                        <li class="ac">
                            <a href="javascript:alert(0);">
                                <img src="img/20181010ouywlf.jpg" />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:alert(1);">
                                <img src="img/20200518mgbozo.jpg" />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:alert(2);">
                                <img src="img/20180817xfcmay.jpg" />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:alert(3);">
                                <img src="img/20180817zfnvtj.jpg" />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:alert(4);">
                                <img src="img/20180817zecmvz.jpg" />
                            </a>
                        </li>
                    </ul>
                    <ol>
                        <li class="ac">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ol>
                    <a href="javascript:;" id="goPrev">&laquo;</a>
                    <a href="javascript:;" id="goNext">&raquo;</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 4.动态渲染商品列表 -->
    <div class="module">
        <div class="tit-z">
            <div class="tit">
                <div class="titlove">
                    <p>今日推荐</p>
                </div>
            </div>
            <div class="oltit">
                <!-- <li>
				<div class="imgbox1">
					<a href="#">
						<img src="img/jingbaozhuang.jpg" alt="">
					</a>
				</div>
				<div class="name2"><a href="#">超能 柠檬草透明皂 洗衣皂 260g*2</a></div>
				<div class="money-fl">￥10.5</div>
			</li> -->
            </div>
        </div>
    </div>

    <!-- 5.网页尾部 -->
    <div class="module">
        <div class="footer">
            <div class="footer-c">
                <div class="footer-top">
                    <div class="footer-tit">
                        <div class="li-b">
                            <span style="font-weight: bolder;">关于OJO眼镜</span>
                            <li>免责声明</li>
                            <li>隐私保护</li>
                            <li>诚聘英才</li>
                            <li>联系我们</li>
                            <li>联系客服</li>
                        </div>
                    </div>

                    <div class="footer-tit">
                        <div class="li-b">
                            <spa style="font-weight: bolder;" n>新手入门</span>
                                <li>购物流程</li>
                                <li>会员介绍</li>
                                <li>常见问题</li>
                                <li>发票说明</li>
                                <li>优惠券</li>
                        </div>
                    </div>

                    <div class="footer-tit">
                        <div class="li-b">
                            <spa style="font-weight: bolder;" n>支付配送</span>
                                <li>支付流程</li>
                                <li>会员介绍</li>
                                <li>支付方式</li>
                                <li>货到付款</li>
                                <li>快递及运费</li>
                        </div>
                    </div>

                    <div class="footer-tit">
                        <div class="li-b">
                            <spa style="font-weight: bolder;" n>售后服务</span>
                                <li>30天包退</li>
                                <li>如何换货</li>
                                <li>如何挑货</li>
                                <li>使用说明</li>
                                <li>投诉建议</li>
                        </div>
                    </div>
                    <div class="footer-tit">
                        <div class="li-b">
                            <spa style="font-weight: bolder;" n>帮助中心</span>
                                <li>友情链接</li>
                                <li>常见问题</li>
                                <li>验光单对照</li>
                                <li>购物协议</li>
                                <li>注册协议</li>
                        </div>
                    </div>
                </div>

                <div class="footer-bottom">
                    <div class="bottom-nav">
                        <li>OJO首页</li>
                        <li>眼镜知识</li>
                        <li>框架眼镜</li>
                        <li>联系我们</li>
                        <li>投诉建议</li>
                        <li>网站地图</li>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- <script src="js/jquery.min.js"></script>
 -->
<script src="js/jquery2.js"></script>
<script src="js/erjicaidan.js"></script>
<script src="js/lunbotu.js"></script>
<script src="js/page.js"></script>
<!-- <script src="js/jquery.js"></script> -->

<!-- jq设置楼层效果 -->
<script>
    $(".nav-x").children("li").click(function() {
        $("html").animate({
            scrollTop: $(".module").eq($(this).index()).offset().top
        })
    })
</script>
<!-- 若登录成功则改变网页顶部的样式 -->
<script>
    let userMsg = sessionStorage.getItem("userMsg") ? JSON.parse(sessionStorage.getItem("userMsg")) : {};
    if (userMsg.user && userMsg.pass) {
        $(".denglubtn").html(userMsg.user);
        // location.href="shouye.html"
        $(".pshi").html(userMsg.user);
        $(".aershi").attr("href", "#");
        $('.ajiushi').attr('href', '#');
    }
</script>

</html>